<template>
    <div class="design-preview-row" :class="boxClass" :style="boxStyle"  :data-id="id">
        <div class="row-item" v-for="(item,modelIndex) in rowNum" @click="handleModelFocus(modelIndex)" :key="modelIndex"  @drop="handleDrop($event,modelIndex)" @dragleave="handleDragleave($event,modelIndex)" @dragover.prevent="handleDragover($event,modelIndex)">
            <template v-if="list[modelIndex] && list[modelIndex]!='empty'">
                <div class="row-item-mask"  >
                    <div class="row-item-mask-ctrl">
                        <div class="row-item-mask-ctrl-item" v-if="modelLoadingList[modelIndex]">
                            <bi-icon loading />
                        </div>
                        <div class="row-item-mask-ctrl-item" v-for="(ctrl,name) in modelCtrlList[modelIndex]" :key="name" @click="ctrl.fun()" >
                            <bi-icon :data="ctrl.icon" />
                        </div>
                        <div class="row-item-mask-ctrl-item" @click="handleDelModel(modelIndex)" title="删除组件">
                            <bi-icon data="fa-trash" />
                        </div>
                    </div>
                </div>
                <component :is="'design-model-'+list[modelIndex].type" 
                :row-index="index" 
                :row-type = "type"
                :model-id="list[modelIndex].id" 
                :model-index="modelIndex" 
                :param="list[modelIndex].param"
                ></component>
            </template>
            <div v-else class="row-item-empty"></div>
        </div>

        <div class="tools-box" ref="tools">
            <div class="tools-item" @click="$emit('del',index)" title="删除行">
                <bi-icon data="fa-trash" />
            </div>
            <div class="tools-item"  @click="$emit('setStyle',index)" >
                <bi-icon data="fa-paint-brush" title="样式" />
            </div>
            <div class="tools-item" :class="{'disabled':index==0}" @click="$emit('up',index)" title="上移"  >
                <bi-icon data="fa-arrow-up" />
            </div>

            <div class="tools-item" :class="{'disabled':index+1==pageLength}" @click="$emit('down',index)" title="下移" >
                <bi-icon data="fa-arrow-down" />
            </div>
        </div>
        
    </div>
</template>

<script>
import  {list} from './modelList.js';

let components = {};

for (let key in list){
    components['design-model-'+key] = list[key].preview;
}

export default{
    emits:['focus','del','setStyle','updateModel','up','down'],
    components,
    inject:{
        modelFocus:{
            default(){
                return ()=>{}
            }
        },
        repaint:{
            default(){
                return ()=>{}
            }
        }
    },
    data(){
        let rowNum = 1;

        if (this.type =='row-2') rowNum = 2;
        if (this.type =='row-3') rowNum = 3;
        let modelLoadingList = [];
        let modelCtrlList  = [];

        for (let i=0;i<rowNum;i++){
            modelLoadingList.push(false);
            modelCtrlList.push({});
        }

        return {
            rowNum,
            modelLoadingList,
            modelCtrlList
        }
    },

    props:{
        type:String,
        index:{
            type:Number,
            default:0
        },
        id:{
            type:String,
            default:''
        },
        pageLength:{
            type:Number,
            default:0
        },
        modelList:{
            type:Array,
            default:[]
        },
        style:{
            type:Object,
            default:{}
        },
        focus:{
            type:Boolean,
            default:false
        }
    },
    computed:{
        list:{
            get(){
                return this.modelList;
            },
            set(val){
                console.log(val);
                this.$emit('updateModel',val);
            }
        },
        boxClass(){

            let classList = [];
            classList.push(this.type);

            if (this.focus) classList.push('focus');

            return classList;
        },
        boxStyle(){
            let style = {};

            if (this.style){

                if (this.style['zIndex'] && this.style['zIndex']!='') style['z-index'] = this.style['zIndex'];
                //marginTop
                if (this.style['marginTop'] && this.style['marginTop']!='') style['margin-top'] = this.style['marginTop'];
                //marginBottom
                if (this.style['marginBottom'] && this.style['marginBottom']!='') style['margin-bottom'] = this.style['marginBottom'];
                //modelGap
                if (this.style['modelGap'] && this.style['modelGap']!='') style['--model-gap'] = this.style['modelGap'];
            }
            return style;
        }
    },
    methods:{
        handleDrop(event,index){
            let column = event.dataTransfer.getData('column');
            
            if (column.indexOf(this.type)===-1){
                return
            }
            event.target.classList.remove('focus');
            let name = event.dataTransfer.getData('name');
            

            
            if (this.modelList[index] && this.modelList[index] != 'empty'  ){
                this.$confirm('是否替换当前组件？',()=>{
                    this.addItem(name,index)
                });
            }else{
                this.addItem(name,index);
            }
        },
        addItem(name,index){
            //更新list
            
            this.list[index] =  {
                id:'M'+new Date().getTime().toString() + Math.random().toString().slice(2,5),
                type:name,
                param:{}
            };
            this.repaint();
        },
        modelCtrl(index,name,icon,fun){
            this.modelCtrlList[index][name] = {
                icon,
                fun
            }
        },
        modelLoading(index,show){
            
            this.modelLoadingList[index] = show;
        },
        handleDragover(event,index){         
            let column = event.dataTransfer.getData('column');
            
            if (column.indexOf(this.type)==-1){
                event.preventDefault();
                event.dataTransfer.effectAllowed = 'none';
            }else{
                event.dataTransfer.effectAllowed = 'move';
                event.target.classList.add('focus');
            }
        },
        handleDragleave(event){
            event.target.classList.remove('focus');
        },
        handleModelFocus(index){
            this.$emit('focus',this.index);
            if (this.list[index] && this.list[index] != 'empty' ){
                this.modelFocus(this.index,index,this.list[index].id,'model');
            }else{
                this.modelFocus(this.index,index,'','empty');
            }
        },
        handleDelModel(index){
            this.$confirm('确定要删除当前组件？',()=>{
                this.list[index] = 'empty';
                this.repaint();        
            });
        }
    },
    mounted(){
    }
}
</script>


<style>


.design-preview-row{
    
    margin-bottom: var(--row-padding);
    display: grid;
    flex: 0;
    width: 100%;
    position: relative;
    z-index: 1;
}


.design-preview-row.row-fluid{
    width: 750px;
    margin-left:calc( var(--page-padding) * -1 );
    grid-template-columns: 1fr;
}

.design-preview-row.row-1{
    grid-template-columns: 1fr;
}

.design-preview-row.row-2{
    grid-template-columns: 1fr 1fr;
    gap: var(--model-gap);
}

.design-preview-row.row-3{
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--model-gap);
}


.design-preview-row .row-item{
    position: relative;
}
.design-preview-row .row-item .row-item-empty{
    min-height: 200px;
    position: relative;
    border: 2px solid var(--bs-gray-500);
    background-color:  var(--bs-gray-300);
    cursor: pointer;
    height: 100%;
}

.design-preview-row .row-item .row-item-mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.design-preview-row .row-item .row-item-empty:hover{
    background-color:  var(--bs-gray-100);
}

.design-preview-row .row-item .row-item-empty.focus{
    background-color: var(--bs-gray-100);
}


.design-preview-row  .tools-box{
    position: absolute;
    top: 0;
    right: calc( -26px / var(--scale) );
    display: none;
    z-index: 10000;
}

.design-preview-row.focus .tools-box{
    display: block;
}

.design-preview-row  .tools-box .tools-item{
    width: calc( 24px / var(--scale) );
    height: calc( 24px / var(--scale) );
    background-color: rgba(var(--bs-secondary-bg-rgb), 0.5);
    border: calc( 1px / var(--scale)) solid rgba(var(--bs-secondary-color-rgb), 0.3);
    margin-bottom: calc( 5px / var(--scale)); 
    font-size: calc( 12px / var(--scale));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-gray-700);
    cursor: pointer;
}

.design-preview-row  .tools-box .tools-item:hover{
   background-color: rgba(var(--bs-secondary-bg-rgb), 1);
   border: calc( 1px / var(--scale)) solid rgba(var(--bs-secondary-color-rgb), 0.7);
}

.design-preview-row  .tools-box .tools-item.disabled{
    background-color: rgba(var(--bs-secondary-bg-rgb),0.2);
    border: calc( 1px / var(--scale)) solid rgba(var(--bs-secondary-color-rgb), 0.2);
    color: rgba(var(--bs-secondary-color-rgb), 0.2);
    cursor:default;
}

.design-preview-row  .row-item-mask-ctrl{
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10000;
    display: flex;
    gap: 10px;
}


.design-preview-row  .row-item-mask-ctrl .row-item-mask-ctrl-item{
    font-size: 24px;
    color: #000;
    width: 40px;
    height: 40px;
    background-color: #FFFFFF80;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
}
</style>